import { useMemo } from 'react';
import { Toast } from 'antd-mobile';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import Icons from './Icons';
import { TextWidget } from '@inbiz/react';
import './index.less'

export default function PageContainer(props: any) {
  const getPreView = (path: string) => {
    const { origin, pathname, search } = window.location;
    const pageArr = path.split('/');
    const page = pageArr[pageArr.length - 1];
    const pageUrl = `${origin}${pathname}${search}#${process.env.NODE_ENV == 'development' ? '/preview' : ''
      }/page/${page}`;
    return pageUrl;
  };

  const onLoadMore = () => {
    if (props.associatePage) {
      let path = props.associatePage.split(',')[0];
      window.open(getPreView(path), '_self');
    } else {
      // 请联系管理员配置关联页面
      Toast.show({
        icon: <Icons._error />,
        content: (
          <div style={{ textAlign: 'center' }}>
            <TextWidget>FolderPanel.lang.configureAssociationPage</TextWidget>
          </div>
        ),
      });
    }
  };

  let _extra = useMemo(() => {
    if (props?.indexRoute == 'folderPanel' && props.loadMoreLocation == 'top') {
      return (
        <div
          style={{
            color: 'var(--inbiz-color-secondary-text)',
            fontSize: 14,
            textAlign: 'center',
            lineHeight: '32px',
          }}
          onClick={onLoadMore}
        >
          {props.loadMoreText}
        </div>
      );
    } else {
      return null;
    }
  }, [props]);

  return (
    <>
      <div className='ecm-page-container-h5'>
        <BizHeader extra={_extra} {...props} />
        <BizBody {...props}>{props.children || null}</BizBody>
      </div>
    </>
  );
}
